export const filletCornerAndLine = () => {
    return `
   
  
   
    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  
  const state = reactive({
    option: {
  legend: {
    data: ["贯通率", "球星", "经纪人"],
    textStyle: {
      color: "#B4B4B4",
    },
    left: "7%",
    top:10,
  },
      //图表离容器的距离
      grid: {
         left: "10%",
         top: "10%",
         right: "10%",
         bottom: "10%",
      },
        tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(255,255,255,1)",
    axisPointer: {
      type: "shadow",
      label: {
        show: true,
        backgroundColor: "#7B7DDC",
      },
    },
  },
      //X轴
      xAxis: {
         data: ['库里', '科比', '詹姆斯', '乔丹', '杜兰特', '欧文', '威少'],
         axisLabel: {
            textStyle: {
               color: '#D3E4FE',
               fontSize: 16
            }
         },
         axisTick: {
            show: false //隐藏X轴刻度尺
         },
  
      axisLine: {
        show: true,
        lineStyle: {
           color: '#00A8FF'
        }
     },
      },
      //y轴
      yAxis:[
       {
        name:"(万元)", 
       
        nameTextStyle: {
            color:"#97B2E0",
            padding:[0,0,-530,-10]
        },
        axisLabel: {
          textStyle: {
             color: '#D3E4FE',
             fontSize: 16
          }
       },
        axisTick:{
          show:false
      },
      splitLine: {
        show: false,
       
        },
      axisLine: {
        show: true,
        lineStyle: {
           color: '#00A8FF'
        },
        
     },
      },
       {
        name:"(个)", 
       
        nameTextStyle: {
            color:"#97B2E0",
            padding:[0,0,-530,-10]
        },
        axisLabel: {
          textStyle: {
             color: '#D3E4FE',
             fontSize: 16
          }
       },
        axisTick:{
          show:false
      },
      splitLine: {
        show: false,
       
        },
      axisLine: {
        show: true,
        lineStyle: {
           color: '#00A8FF'
        },
        
     },
      }
      ],
      series: [
          {
      name: "贯通率",
      type: "line",
      smooth: true,
      showAllSymbol: true,
      symbol: "emptyCircle",
      symbolSize: 8,
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: "rgba(242, 157, 59, 1)",
        },
      },
        data: [12, 21, 24, 61, 121, 0, 11],
    },
      {
         data: [2, 1, 4, 6, 1, 0, 1],
         label: {
            show: true,
            position: "top",
            distance: 0,
            color: "#D3E4FE",
            formatter: "{c}",
            offset:[0,-5]
         },
         name: '球星',
         //图表类型
         //折线图line,饼图pie，散点图scatter等等
         type: 'bar',
         barWidth: 20,
         itemStyle: {
            barBorderRadius: [20, 20, 0, 0],
            color: {
               x: 0,  //右
               y: 0,  //下
               x2: 0,  //左
               y2: 1,  //上
               colorStops: [
                  {
                     offset: 0.1,
                     color: 'rgba(48, 238, 255, 1)' // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color:'rgba(0, 152, 175, 1)'  // 100% 处的颜色
                  }
               ]
            }
         }
      },
           {
         data: [2, 1, 4, 6, 1, 0, 1],
         label: {
            show: true,
            position: "top",
            distance: 0,
            color: "#D3E4FE",
            formatter: "{c}",
            offset:[0,-5]
         },
         name: '经纪人',
         //图表类型
         //折线图line,饼图pie，散点图scatter等等
         type: 'bar',
         barWidth: 20,
         itemStyle: {
            barBorderRadius: [20, 20, 0, 0],
            color: {
               x: 0,  //右
               y: 0,  //下
               x2: 0,  //左
               y2: 1,  //上
               colorStops: [
                  {
                     offset: 0,
                     color:'rgba(59, 175, 255, 1)'  // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color:  'rgba(0, 72, 200, 1)' // 100% 处的颜色
                  }
               ]
            }
         }
      }
      ]
   }
   
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    
  
  
    
  
    `;
  };
  